<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/all.css" />
		<link rel="stylesheet" type="text/css" href="css/shopping-cart.css" />
		<link rel="stylesheet" type="text/css" href="index_iconfont/iconfont.css" />
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/api.js" type="text/javascript" charset="utf-8"></script>

		<script src="js/Cookie.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="scoll-top">
			<div class="wraper1">
				<div class="header-a">
					<a href="index.html">
						<div class="logo">暖岛</div>
					</a>
					<div class="header-search">
						<input type="search" class="header-search-input" id="J_search-input" placeholder="请输入关键字搜索">
						<i></i>
					</div>
					<span class="header-a_hint">每日10点上新&nbsp;&nbsp;&nbsp;&nbsp;满249元包邮</span>
					<div class="index-weiboshare m-hidden" id="J_index-weibo-plugins1"><iframe width="121" scrolling="no" height="24" frameborder="0" src="http://widget.weibo.com/relationship/followbutton.php?language=zh_cn&amp;width=136&amp;height=24&amp;uid=2093879035&amp;style=2&amp;btn=red&amp;dpc=1"></iframe></div>

					<div class="nav-mynuandao">
						<div class="mini-cart">
							<span class="iconfont icon-gouwuche"></span>
							<span class="cart-word">购物车</span>
							<span class="cart-num">0</span>
						</div>
						<li class="site-nav-pipe m-hidden">|</li>
						<div class="user-login">
							<a href="reg-login.html">登录 | 注册</a>
						</div>
						<div id="user-information">
							<span class="user-img"></span>
							<span class="user-name"></span>
							<p class="user-icon"></p>
							<div class="user-nuandao">
								<div class="arrow"></div>
								<ul class="user-nuandao-list">
									<li>
										<a href="javascript:;">我的订单</a>
									</li>
									<li>
										<a href="javascript:;">未付款订单</a>
									</li>
									<li><span class="user-nuandao-num">1</span>
										<a href="javascript:;">我的代金券</a>
									</li>
									<li>
										<a href="javascript:;">我的评价</a>
									</li>
									<li>
										<a href="javascript:;">我的最爱</a>
									</li>
									<li>
										<a href="javascript:;">我的作品</a>
									</li>
									<li>
										<a href="javascript:;">修改密码</a>
									</li>
									<li class="log-out" id="log-out">
										<a href="javascript:;" id="">登出</a>
									</li>
								</ul>

							</div>
						</div>
					</div>
				</div>
			</div>
			<!--2-->
			<div class="wraper2">
				<div class="container">
					<ul class="main-nav">
						<li>
							<a href="javascript:;" class="nav-special">大家喜欢</a>
						</li>
						<li>
							<a href="javascript:;" class="open-second-nav second-nav-1">女装服饰</a>
						</li>
						<li>
							<a href="javascript:;" class="open-second-nav second-nav-2">男装服饰</a>
						</li>
						<li>
							<a href="javascript:;" class="open-second-nav second-nav-3">美容健康</a>
						</li>
						<li>
							<a href="javascript:;" class="open-second-nav second-nav-4">家居创意</a>
						</li>
						<li>
							<a href="javascript:;" class="open-second-nav second-nav-5">数码户外</a>
						</li>
						<li>
							<a href="javascript:;" class="open-second-nav second-nav-6">限时暖价</a>
						</li>
						<li>
							<a href="javascript:;" class="nav-special">精选品牌</a>
						</li>

					</ul>
					<div class="wraper2-1">
						<div class="wraper2-1_cont cont-first"><i class="iconfont icon-haoyou icon-color"></i>邀请好友立送20元</div>
						<div class="wraper2-1_cont cont-second">
							<div class="mobile-link">
								<i class="iconfont icon-mobile icon-color">
								
							</i> 手机版
							</div>
							<!--hover-->
							<div class="hover-mobile">
								<img src="img/mobile.jpg" />
								<div class="arrow2"></div>
							</div>
						</div>
						<div class="wraper2-1_cont cont-third">
							<div class="iconfont icon-weixin">
							</div>
							<!--hover-->
							<div id="" class="hover-weixin">
								<img src="img/weixin.jpg" />
								<div class="arrow3"></div>
							</div>
						</div>

					</div>
					<!---->
					<!--2级菜单-->
					<div class="wrapper-second-nav">
						<div class="second-nav">
							<div class="second-nav-l">
								<h4>逛分类</h4>
								<ul>
									<li>
										<a href="javascript:;">
											<!--新品T恤-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--T恤背心-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--卫衣-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--衬衫罩衫-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--毛衣针织-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--连衣裙-->
										</a>
									</li>
								</ul>
								<ul>
									<li>
										<a href="javascript:;">
											<!--半身裙-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--外套-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--牛仔裤-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--裤装-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--泳衣-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--內衣-->
										</a>
									</li>
								</ul>
								<ul>
									<li>
										<a href="javascript:;">
											<!--袜子-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--鞋靴-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--箱包-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--饰品-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--配件-->
										</a>
									</li>
									<li>
										<a href="javascript:;">
											<!--限时暖价-->
										</a>
									</li>
								</ul>
							</div>
							<div class="second-nav-r">

								<h4>特别推荐</h4>
								<div class="second-nav-r-bottom">
									<ul>
										<li>
											<a href="javascript:;">暖岛独家</a>
										</li>
										<li>
											<a href="javascript:;">买手精选</a>
										</li>
										<li>
											<a href="javascript:;">编辑推荐</a>
										</li>
										<li>
											<a href="javascript:;">岛民最爱</a>
										</li>
										<li>
											<a href="javascript:;">本月星座</a>
										</li>
										<li>
											<a href="javascript:;">LookBook</a>
										</li>
									</ul>
									<div class="second-nav-r-img">
										<a href="javascript:;"><img /></a>
										<a href="javascript:;"><img /></a>
										<a href="javascript:;"><img /></a>
										<a href="javascript:;"><img /></a>
										<a href="javascript:;"><img /></a>
										<a href="javascript:;"><img /></a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!---->
				</div>

			</div>
		</div>
		<!--baoqilai-->
		<!--空白-->
		<div class="header-none">

		</div>
		<!--网页头部结束-->

		<!--中间部分-->
		<div class="w988 pt80" id="cart-main">

			<!-- 购物1，2，3步 -->
			<div class="process m-hidden">
				<div class="one">1.查看购物车</div>
				<div class="two">2.确认订单</div>
				<div class="three">3.提交成功</div>
				<div class="flow"></div>
			</div>
			<!-- // 购物1，2，3步结束 -->
			<div class="cart-header">
				<h2>我的购物车 ( <span id="quantity_1">4</span> )</h2>
				<div class="spend">
					<span id="error_msg_1" style="padding-right:15px; color:red;"></span> 已选商品(不含运费)&nbsp;:&nbsp;<strong>￥<span class="total" id="total-price-1">595</span>元</strong>&nbsp;&nbsp;
					<button type="submit" id="to-checkout-1" disable="0">立即结算
				</button>
				</div>
			</div>

			<!-- //.cart-header -->
			<div class="order">
				<ul class="order-header">
					<li class="th-chk"><input type="checkbox" id="checkall" checked="checked" value="">&nbsp;全选</li>
					<li class="th-info m-hidden">商品</li>
					<li class="th-price m-hidden">单价(元)</li>
					<li class="th-amount m-hidden">数量</li>
					<li class="th-sum m-hidden">小计(元)</li>
				</ul>
				<div class="order-list">
					<!-- 一个设计师的开始 -->
					<div class="order-holder">
						<div class="designer" bnum="2">设计师:&nbsp;陈耕云
						</div>
						<div id="my-cart-list">
							
						</div>

					</div>
					<!--一个设计师的结束 -->

				</div>
				<!-- //.order-list -->
				<div class="order-footer">
					<div class="footer-aside"> 满&nbsp;<span class="">249</span>&nbsp;元包邮(家具类商品除外)&nbsp;&nbsp;</div>
					<div class="footer-bside">
						<span id="quantity"></span>&nbsp;件商品&nbsp;&nbsp;共计&nbsp;&nbsp;(不含运费)&nbsp;&nbsp;:&nbsp;&nbsp;<strong>￥<span id="total-price"></span>元</strong>
					</div>
				</div>

			</div>
			<!-- //.order-footer -->
			<!-- //.order -->
			<div class="cart-footer">
				<a href="./">&lt;&lt;&nbsp;继续购物</a>
				<div class="spend">
					<span id="error_msg" style="padding-right:15px; color:red;">
						
					</span>
					<button type="submit" id="to-checkout" disable="0">立即结算
					</button>
				</div>
			</div>

		</div>
		<!-- //.cart-footer -->

		<!--8888底部-->
		<div class="wrapper8">

			<div id="footer">

				<div id="goTop">^</div>

				<div id="footer-color">
					<div class="footer-a">
						<div class="footer-a-left">
							<ul>
								<li>
									<a href="javascript:;">逛逛暖岛</a>
								</li>
								<li>
									<a href="javascript:;">登录注册</a>
								</li>
								<li>
									<a href="javascript:;">下单及支付</a>
								</li>
								<li>
									<a href="javascript:;">使用代金券</a>
								</li>
								<li>
									<a href="javascript:;">找回密码</a>
								</li>
							</ul>
							<!--2-->
							<ul>
								<li>
									<a href="javascript:;">订单详情</a>
								</li>
								<li>
									<a href="javascript:;">查询订单</a>
								</li>
								<li>
									<a href="javascript:;">追踪物流</a>
								</li>
								<li>
									<a href="javascript:;">配送费用</a>
								</li>
								<li>
									<a href="javascript:;">配送时间</a>
								</li>
							</ul>
							<!--3-->
							<ul>
								<li>
									<a href="javascript:;">退货换货</a>
								</li>
								<li>
									<a href="javascript:;">退还规则</a>
								</li>
								<li>
									<a href="javascript:;">退换方式</a>
								</li>
								<li>
									<a href="javascript:;">退款时间</a>
								</li>
								<li>
									<a href="javascript:;">运费报销</a>
								</li>
							</ul>
							<!--4-->
							<ul>
								<li>
									<a href="javascript:;">关于暖岛</a>
								</li>
								<li>
									<a href="javascript:;">暖岛故事</a>
								</li>
								<li>
									<a href="javascript:;">合作机会</a>
								</li>
								<li>
									<a href="javascript:;">加入暖岛</a>
								</li>
								<li>
									<a href="javascript:;">联系我们</a>
								</li>
							</ul>
						</div>
						<div class="footer-a-right">
							<h4>订阅电子报</h4>
							<div class="footer-email">
								<input class="input" type="email" name="news-email" id="news-email" placeholder="请输入邮箱地址">
								<a herf="javascript:;" id="newsbook-btn" class="iconfont icon-youxiang-"><i></i></a>
							</div>
							<!--图标-->

							<!--图标-->
						</div>
					</div>

				</div>
				<!--color-->
				<!--footer-->

				<div class="footer-b">
					<div class="anquan">
						<img src="img/anquanrenz.jpg" />
					</div>
					<ul class="footer-list">
						<li>
							<a href="javascript:;">使用条款</a>
						</li>
						<li>
							<a href="javascript:;">暖岛APP</a>
						</li>
						<li>
							<a href="javascript:;">友情链接</a>
						</li>
					</ul>
					<p>Nuandao.com 北京暖岛网络信息科技有限公司 © 2011-2016 All rights reserved 京ICP备13034710号-1 | 京公网安备11010102001819号 | 执照号：91110108584425669B | 营业执照信息 | 食品经营许可证：
					</p>

					<a class="icon-315 m-hidden" href="http://www.315online.com.cn/member/315140028.html" title="安全交易认证" target="_blank"></a>
					<div class="work m-hidden">
						周一至周五9:30-18:00<br> 客服热线：021-50276566
					</div>
				</div>
				<!--footer-b-->

				<!--联系客服-->
				<div style="position: fixed; z-index: 279; bottom: 5px; right: 5px;">
					<a href="javascript:;" onclick="easemobim.bind({tenantId: 27912})">
						<img id="easemob-icon" src="http://img2.nuandaocdn.com/Public/images/easemob-icon.png">
					</a>
				</div>
				<!--联系客服-->
			</div>
		</div>
	</body>
	<script src="js/secondNav.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/all.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//数量输入框调用
		
		var uid = getCookie('uid')
		var selectCarAPI = `http://jx.xuzhixiang.top/ap/api/cart-list.php?id=${uid}`
		var cartList=[]
		$.ajax({
			url:selectCarAPI,
			type:'get',
			success:function(res){
				console.log(JSON.parse(res).data);
				cartList=JSON.parse(res).data;
				
				renderHTML(cartList,function(res){
					//console.log(res)
					$('#quantity').html(res.number)
					$('#total-price').html(res.price)
				})
				//减少商品数量
				$('.decrease').click(function(){
					let pnum=Number($(this).next().val())-1;
					//console.log(pnum)
					
					if(pnum >= 1){
						$(this).next().val(pnum)
						let oneMoney=$(this).parents('.buy-number').siblings('.td-sum').children('.one-money')
						let onePrice=Number($(oneMoney).attr('one-price'))
						$(oneMoney).html(onePrice*pnum)
						
						//总价格的变化
						$('#total-price').html(($('#total-price').html()-onePrice).toFixed(2))
						//console.log(onePrice)
					}else{
						pnum = 1;
						$(this).next().val(1)
					}
					
					
					let pid=$(this).siblings('.ipt-num').attr('pid')
					let updateAPI = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=${uid}&pid=${pid}&pnum=${pnum}`
					$.ajax({
						url:updateAPI,
						type:'get',
						success:function(updataRes){
							console.log(JSON.parse(updataRes))
						}
					})
					
				})
				//增加商品数量
				$('.increase').click(function(){
					let pnum=Number($(this).siblings('.ipt-num').val())+1;
					$(this).siblings('.ipt-num').val(pnum)
					let pid=$(this).siblings('.ipt-num').attr('pid')
					let updateAPI = `http://jx.xuzhixiang.top/ap/api/cart-update-num.php?uid=${uid}&pid=${pid}&pnum=${pnum}`
					$.ajax({
						url:updateAPI,
						type:'get',
						success:function(updataRes){
							console.log(JSON.parse(updataRes))
						}
					})
					let oneMoney=$(this).parents('.buy-number').siblings('.td-sum').children('.one-money')
					let onePrice=Number($(oneMoney).attr('one-price'))
					$(oneMoney).html(onePrice*pnum)
					//总价格的变化
					$('#total-price').html((Number($('#total-price').html())+onePrice).toFixed(2))
				})
				//删除商品
				$('.item-delete').click(function(){
					let cid=$(this).attr('cid')
					console.log(cid)
					let deleteAPI=`http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=${uid}&pid=${cid}`
					$.ajax({
						url:deleteAPI,
						type:'get',
						success:function(res){
							console.log(JSON.parse(res))
							
						}
					})
					console.log($(this).parent())
					$(this).parent().remove()
					
					//商品总价格的变化
					let totalPrice=Number($('#total-price').html())-$(this).siblings('.td-sum').children().html();
					//console.log(totalPrice)
					$('#total-price').html(totalPrice.toFixed(2))
				})
				
				
				//选中按钮
				$('.td-chk').on('click',function(evt){
					//console.log(this)
					//console.log($(this).is(':checked'))//true或者false
					if($(this).is(':checked')){
						//console.log()
						
						let totalPrice=Number($('#total-price').html())+Number($(this).parent().siblings('.td-sum').children().html());
						$('#total-price').html(totalPrice.toFixed(2))
					}else{
						console.log()
						let totalPrice=Number($('#total-price').html()-$(this).parent().siblings('.td-sum').children().html());
						
						$('#total-price').html(totalPrice.toFixed(2))
					}
				})
				
				//全选按钮
				$('#checkall').click(function(){
					if($(this).is(':checked')){
						//console.log($('.td-chk'))
						$('.td-chk').each(function(index,val){
						//	console.log(val)
						})
						$('.td-chk').prop('checked','checked')
						//for(let )
						
						$('#total-price').html($('.td-chk').attr('allmoney'))
					}else{
						$('.td-chk').removeAttr('checked','checked')
						$('.td-chk').attr('allmoney',$('#total-price').html())
						$('#total-price').html(0)
					}
				})
				
			}//success结束
			
			
			
			
			
			
			
			
		})
		function renderHTML(data,callback){
			let a=0;
			let b=0;
			for(let item of data){
				
				
				$('#my-cart-list').append(`
					<ul class="order-item checked" id="c3458480">
						<li>
						<input type="checkbox" class="td-chk" checked=true value="3458480" pid="${item.pid}" subid="143212"></li>
						<li class="td-info">
							<a href="javascript:;" target="_blank">
								<img src="${item.pimg}" />
							</a>
							<dl>
								<dt><a href="javascript:;" target="_blank">${item.pname}</a>
								</dt>
								<dd>品牌: 安妮陈（非自营）</dd>
								<dd>尺寸: (S)</dd>
								<dd class="text-error"></dd>
							</dl>
						</li>
						<li class="td-price">￥${item.pprice}</li>
						<li class="buy-number">
							<div class="spinner">
								<button class="decrease">-</button>
								<input type="text" class="ipt-num" value="${item.pnum}" pid="${item.pid}"/>
								<button class="increase">+</button>
							</div>	
						</li>
						<li class="td-sum">
							￥<strong class="one-money" one-price="${item.pprice}">${item.pnum*item.pprice}</strong>
						</li>
						<a class="item-delete" cid="${item.pid}" href="javascript:;">删除</a>
					</ul>
				`)
				a++;
				b += item.pnum*item.pprice
				
			}
			
			if(callback){
				callback({'number':a,'price':b})
			}
			
			
		}
		
		
		//立即结算
		$('#to-checkout').click(function(){
			location.href='settlement.html'
		})
			
		
	</script>
	

</html>